import React, { useCallback } from 'react';
import { Input } from 'antd';
import useCaptcha from '@/hooks/useCaptcha';


import './index.less';

const CaptchaCode = React.forwardRef((props, ref) => {
  const { onChange } = props;
  const { captchaRef, getCaptcha } = useCaptcha();

  const handleCaptchaCode = useCallback(
    evt => {
      onChange?.(evt.target.value);
    },
    []
  );
  return (
    <div className='captcha-code-container' ref={ref}>
      <Input placeholder='请输入验证码' onChange={handleCaptchaCode} />
      <span ref={captchaRef}></span>
      <span className='loadding' onClick={getCaptcha} >看不清，换一张</span>
    </div>
  )
});

export default CaptchaCode;
